<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>资料修改</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style type="text/css">
body {
	height: 100%;
	background-image: url("image/body_bj.jpg");
	font-size: 13px;
	background-image: url("image/body_bj.jpg");
}

.tx {
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

.main {
	width: 400px;
	height: 100%;
	margin: 0 auto;
}

img {
	width: 100px;
	height: 100px;
	border-radius: 50px;
}

form {
	margin-bottom: 10px;
}

.formField {
	overflow: auto;
	width: 90%;
	margin-bottom: 5px;
}

label {
	min-width: 130px;
	float: left;
	display: block;
	margin: 0 auto;
	padding-top: 2px;
	padding-left: 10px;
	text-transform: capitalize;
	padding-left: 10px;
	padding-left: 10px;
}

.formText {
	display: block;
	float: left;
}

.xq {
	width: 100%;
	margin: 0 auto;
}

.div1 {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	margin-bottom: 10px;
}
</style>
<script type="text/javascript">
	function fn_browse() {
		document.test_form.browse.click();
	}
	//上传前预览图片
	function preview(file) {
		var prevDiv = document.getElementById('imgg');
		if (file.files && file.files[0]) {
			var reader = new FileReader();
			reader.onload = function(evt) {
				prevDiv.src = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
	}

	function check(file) {
		var aa = document.getElementById("d_id").value.toLowerCase().split('.');//以“.”分隔上传文件字符串
		var bb = document.getElementById("d_id").value;
		if (bb == "" || bb == null) {
			return true;
		} else {
			if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg'
					|| aa[aa.length - 1] == 'bmp' || aa[aa.length - 1] == 'png') {//判断图片格式{alert('图片格式正确！');
				preview(file);
				return true;
			} else {
				alert('对不起，你选择的图片格式不对\n图片格式应为*.jpg、*.gif、*.bmp、*.png');
				return false;
			}
		}
	}

	function checkk() {
		var aa = document.getElementById("d_id").value.toLowerCase().split('.');//以“.”分隔上传文件字符串
		var bb = document.getElementById("d_id").value;
		if (bb == "" || bb == null) {
			return true;
		} else {
			if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg'
					|| aa[aa.length - 1] == 'bmp' || aa[aa.length - 1] == 'png') {//判断图片格式{alert('图片格式正确！');
				return true;
			} else {
				alert('对不起，你选择的图片格式不对\n图片格式应为*.jpg、*.gif、*.bmp、*.png');
				return false;
			}
		}
	}

	function checkz() {
		var a = document.getElementById("person_id").value;
		var regexp = /(^\d{14}(\d|X|x)$)|(^\d{17}(\d|X|x)$)/;
		var b = regexp.test(a);
		if (b == false) {
			alert("请输入15位或18位身份证号");
		}
	}
</script>
</head>
<body>
	<div style="text-align: center;">
		<h3>资料修改</h3>
	</div>
	<hr>
	<div class="main">
		<c:set value="${staff}" var="x"></c:set>
		<div>
			<form id="form_img" action="StaffDateUpdateServlet" method="post"
				enctype="multipart/form-data" name="test_form"
				onsubmit="return checkk()">
				<div class="div1">
					<input type="hidden" name="staff_id" value="${staff.staff_id}">
					<input type="file" name="browse" style="display: none;"
						onchange="check(this)" id="d_id" /> <a
						href="javascript:fn_browse();"> <c:if
							test="${not empty x.image}">
							<img alt="" src="upload/${x.image}" class="btn" id="imgg">
						</c:if> <c:if test="${empty x.image}">
							<img alt="" src="image/noImg.png" class="btn" id="imgg">
						</c:if>
					</a>
				</div>
				<div class="xq">
					<div class="formField clearfix">
						<label for="lastName">姓名:</label> <input type="text"
							class="formText" id="staff_name" name="staff_name"
							value="${x.staff_name}" onfocus="this.value='';" />
					</div>
					<div class="formField clearfix">
						<label for="lastName">性别:</label> <select class="formText"
							name="staff_sex">
							<option value="男">男</option>
							<option value="女">女</option>
							<option value="其他">其他</option>
						</select>
					</div>
					<div class="formField clearfix">
						<label for="lastName">身份证号:</label> <input type="text"
							class="formText" id="person_id" name="staff_pid"
							value="${x.person_id}" onfocus="this.value='';" class="person_id"
							onblur="checkz()" />
					</div>
					<div class="formField clearfix">
						<label for="lastName">住址:</label> <input type="text"
							class="formText" id="lastPrice" name="s_dz"
							onfocus="this.value='';" value="${x.address}" />
					</div>
					<div class="formField clearfix">
						<label for="lastName">生日:</label> <input type="date"
							class="formText" id="lastPrice" name="staff_date"
							onfocus="this.value='';" value="${x.birthday}" id="birth" />
					</div>
				</div>
				<div style="text-align: center;">
					<input type="submit" value="确定修改">
				</div>
			</form>
		</div>
	</div>
</body>
</html>